<template>
  <div>
    <section>
      <div class="container">
        <div class="row">
          <h2 v-if="products.length">
            您当前的位置：
            <router-link to="/">首页 &gt;</router-link>
            <router-link to="/deebot-list">地宝（扫地机器人）&gt;</router-link>
            <span>{{ series }}</span>
          </h2>
          <!-- 商品详情 -->
          <div class="goods_info">
            <div class="fl">
              <div class="carousel">
                <div
                  class="goods_perview"
                  v-if="products.length"
                  @mousemove.stop="handleMove"
                  @mouseenter="show"
                  @mouseleave="unshow"
                  ref="glass"
                >
                  <a href="javascript:void(0)">
                    <img
                      :src="showProd.s_goods_photos[currentIndex1].path"
                      alt=""
                    />
                  </a>
                  <div
                    class="zoomPup"
                    :style="{ top: smallTop + 'px', left: smallLeft + 'px' }"
                    ref="small"
                    v-show="showGlass"
                  ></div>
                  <div class="zoomWindow" ref="big" v-show="showGlass">
                    <img
                      :src="showProd.s_goods_photos[currentIndex1].path"
                      alt=""
                      :style="{ top: bigTop + 'px', left: bigLeft + 'px' }"
                    />
                  </div>
                </div>
                <ul class="owl-carousel" v-if="products.length">
                  <li
                    :class="{ zrc: currentIndex1 == index }"
                    v-for="(item, index) in showProd['s_goods_photos']"
                    :key="index"
                    @click="currentIndex1 = index"
                  >
                    <img :src="item.path" alt="" />
                  </li>
                </ul>
              </div>
              <div class="f-action">
                <div class="J-share">
                  <span>分享到&nbsp;</span>
                  <a href="#" @click.prevent></a>
                  <a href="#" @click.prevent></a>
                  <a href="#" @click.prevent></a>
                  <a href="#" @click.prevent></a>
                  <a href="#" @click.prevent></a>
                </div>
                <span class="j_fav">
                  <i class="iconfont icon-start-copy"></i>
                  收藏商品
                </span>
              </div>
            </div>
            <div class="right" v-if="products.length">
              <h1>{{ titles[0] }}</h1>
              <!-- 商品卖点 -->
              <div class="sell_points" v-show="titles.length - 1">
                <span>{{ titles[1] }}</span>
              </div>
              <div class="sell_points" v-show="titles.length - 2">
                <span>{{ titles[2] }}</span>
              </div>
              <div class="promotion">
                <div class="final_price">
                  <div class="lab">销售价：</div>
                  <div class="val" v-if="products.length">
                    <div>
                      <del>￥{{ showProd.price }}</del>
                    </div>
                    <p>￥{{ showProd.sale_price }}</p>
                  </div>
                </div>
                <a href="javascript:void(0)" class="openChatBox">咨询客服</a>
              </div>
              <div class="f_info">
                <div class="f-field">
                  <div class="lab">型号选择：</div>
                  <div class="val">
                    <div class="spec_item z-crt">
                      <img :src="showProd.s_goods_photos[0].path" alt="" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="f-field">
                <div class="lab">服务：</div>
                <div class="val">
                  <span>
                    <i class="iconfont icon-fenqi"></i>
                    免息分期
                  </span>
                  <span>
                    <i class="iconfont icon-zhengpinbaozheng"></i>
                    官方正品
                  </span>
                  <span>
                    <i class="iconfont icon-baoxiu"></i>
                    全国联保
                  </span>
                  <span>
                    <i class="iconfont icon-baoyou"></i>
                    全场满99包邮
                  </span>
                  <span>
                    <i class="iconfont icon-tuihuanhuo"></i>
                    7天无理由退货
                  </span>
                </div>
              </div>
              <div class="f-field">
                <div class="lab">购买数量：</div>
                <div class="val">
                  <div class="amountAct">
                    <div class="minus" @click="decrement">-</div>
                    <input type="text" v-model="num" autocomplete="off" />
                    <div class="plus" @click="increment">+</div>
                  </div>
                </div>
                <div class="lab">销量：</div>
                <div class="val">{{ showProd.sold_num }}</div>
              </div>
              <!-- 购买按钮 -->
              <div class="buy_btn">
                <button class="joincart" @click="addProduct(showProd)">
                  <i class="iconfont icon-cart"></i>
                  加入购物车
                </button>
                <button class="buynow" @click="buyNow(showProd)">
                  立即购买
                </button>
              </div>
            </div>
          </div>
          <!-- 关联商品推荐 -->
          <div
            class="recom"
            v-if="
              products.length && showProd.classify_ids.split(',')[1] != '207'
            "
          >
            <h1>关联商品推荐</h1>
            <div class="recom_content">
              <div class="fl" style="margin-top: 1em">
                <img :src="showProd.s_goods_photos[0].path" alt="" />
                <span class="goods_title">{{ titles[0] }}</span>
              </div>
              <div class="fl">
                <span class="icon">+</span>
              </div>
              <div class="fr recom-2">
                <div>
                  已选择<span id="recom-num">{{
                    relateChecked.length + 1
                  }}</span
                  >个产品
                </div>
                <div>
                  <span>总价</span>
                  <strong id="recom-price" class="recom-price"
                    >￥{{ totalPrice }}</strong
                  >
                </div>
                <div class="recom_joincart">
                  <button id="recom-buy" @click="addAll">加入购物车</button>
                </div>
              </div>
              <div class="fr">
                <span class="icon">=</span>
              </div>
              <div id="recom-slider" class="recom-1">
                <div class="left_arrow arrow">&lt;</div>
                <div class="right_arrow arrow">&gt;</div>
                <div class="recom-con">
                  <div class="recom-wrap">
                    <div
                      class="recom-item"
                      v-for="(item, index) in relatedProd"
                      :key="index"
                    >
                      <div>
                        <router-link :to="`/product/${item.id}`">
                          <img :src="item.s_goods_photos[0].path" alt="" />
                        </router-link>
                      </div>
                      <router-link :to="`/product/${item.id}`">{{
                        item.desc.split("-")[0]
                      }}</router-link>
                      <div>
                        <label>
                          <input
                            type="checkbox"
                            :value="item"
                            v-model="relateChecked"
                          />
                          <b class="recom-price"
                            >￥{{ item.sale_price || item.price }}</b
                          >
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="g-mn cls">
            <div class="goods-more-info fl" ref="cls">
              <div
                class="sticky-wrap"
                :class="{ toTop: up }"
                :style="{ width: theWidth }"
              >
                <div class="m-hd">
                  <ul
                    :class="{ toTop: up }"
                    v-nav-active="{
                      className: 'select',
                      classActive: 'z-crt',
                      currentIndex,
                    }"
                  >
                    <li
                      class="select"
                      v-for="(item, index) in list"
                      :key="index"
                      @click="handleChange(index)"
                    >
                      {{ item }}
                    </li>
                  </ul>
                  <div class="action fr" v-show="up">
                    <span class="price red">￥{{ showProd.sale_price }}</span>
                    <button @click="buyNow(showProd)">立即购买</button>
                  </div>
                </div>
              </div>
              <!-- 商品详情 -->
              <div
                class="tab-panel goods-description"
                v-if="products.length && currentIndex == 0"
              >
                <div class="product-attributes">
                  <ul class="cls">
                    <li>所属分类：{{ series }}</li>
                    <!-- <li>功能：深度清扫(滚刷式)</li> -->
                  </ul>
                </div>
                <!-- 商品描述 -->
                <div class="f-description" v-html="showProd.rich_text"></div>
                <!-- 电子发票说明 -->
                <div class="invoice-note">
                  <div class="note-title">关于发票</div>
                  <div class="note-content">
                    <p>
                      1、如需发票请在下单时选择，默认普通发票全部为电子发票，发票抬头默认为
                      "客户" ，如需更改抬头，请您在 “发票抬头”
                      栏中修改。如需开具增值税专用发票请提供营业执照及公司详细开票资料：公司名称、纳税人识别号、开户行、账号、地址、电话等资料并联系客服开具。
                    </p>
                    <p>
                      2、电子发票的取得：买家可在订单详情中下载，或使用买家收货人手机号通过发票通（http://www.fapiao.com）平台注册查询下载。
                    </p>
                    <p>
                      3、电子发票与传统纸质发票具有相同的法律效力<br />
                      国家税务总局公告〔2015〕84号，第三条：增值税电子普通发票的开票方和受票方需要纸质发票的，可以自行打印增值税电子普通发票的版式文件，其法律效力、基本用途、基本使用规定等与税务机关监制的增值税普通发票相同。
                    </p>
                    <p>
                      4、电子发票查验真伪——国税总局发票查验平台：https://inv-veri.chinatax.gov.cn/
                    </p>
                  </div>
                </div>
              </div>
              <!-- 商品详细参数 -->
              <div
                class="tab-panel goods-parameters"
                v-show="currentIndex == 1"
              >
                <table>
                  <tbody>
                    <tr>
                      <th class="section-hd" colspan="2">详细参数</th>
                    </tr>
                    <tr>
                      <td>功能</td>
                      <td>深度清扫(滚刷式)</td>
                    </tr>
                    <tr>
                      <td>续航时间</td>
                      <td>100分钟及以上(120平米以上)</td>
                    </tr>
                    <tr>
                      <td>机身大小</td>
                      <td>9cm~10cm</td>
                    </tr>
                    <tr>
                      <td>产品名</td>
                      <td>{{ showProd.name }}</td>
                    </tr>
                    <tr>
                      <td>续航时间</td>
                      <td>100分钟及以上(120平米以上)</td>
                    </tr>
                    <tr>
                      <td>充电电池</td>
                      <td>锂电池</td>
                    </tr>
                    <tr>
                      <td>电池容量(mAh)</td>
                      <td>5200</td>
                    </tr>
                    <tr>
                      <td>充电时间 （小时）</td>
                      <td>约6.5</td>
                    </tr>
                    <tr>
                      <td>一次充电 续航时间 （分钟）</td>
                      <td>175</td>
                    </tr>
                    <tr>
                      <td>定时功能</td>
                      <td>有</td>
                    </tr>
                    <tr>
                      <td>功能模式</td>
                      <td>规划式</td>
                    </tr>
                    <tr>
                      <td>边刷</td>
                      <td>1对</td>
                    </tr>
                    <tr>
                      <td>尘盒容积</td>
                      <td>0.42L</td>
                    </tr>
                    <tr>
                      <td>是否有遥控器</td>
                      <td>否</td>
                    </tr>
                    <tr>
                      <td>产品净重</td>
                      <td>4.7kg</td>
                    </tr>
                    <tr>
                      <td>产品尺寸 (mm)</td>
                      <td>353*353*93.6</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!-- 商品评论 -->
              <!-- <div class="tab-panel"></div> -->
              <!-- 商品咨询 -->
              <!-- <div class="tab-panel"></div> -->
            </div>
            <div class="pro_lsidebar fr">
              <div class="gray-title">热销排行</div>
              <div class="gray-content">
                <ul class="product-list">
                  <li
                    v-for="(item, index) in products.slice(0, 5)"
                    :key="index"
                  >
                    <router-link :to="`/product/${item.id}`">
                      <img :src="item.s_goods_photos[0].path" alt="" />
                    </router-link>
                    <div class="product-info">
                      <div class="product-name">
                        <router-link :to="`/product/${item.id}`">
                          {{ item.desc.split("-")[0] }}
                        </router-link>
                      </div>
                      <div class="product-price">¥{{ item.sale_price }}</div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import NavActive from "../directives/navActive.js";
import { addCart } from "../assets/js/request.js";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      id: "",
      currentIndex1: 0,
      currentIndex: 0,
      num: 1,
      top: 0,
      timer: null,
      up: false,
      theWidth: "970px",
      //列表
      list: ["商品详情", "详细参数"],
      relateChecked: [],
      //放大镜数据
      showGlass: false,
      smallWidth: 0,
      smallHeight: 0,
      bigWidth: 0,
      bigHeight: 0,
      offsetLeft: 0,
      offsetTop: 0,
      smallTop: 0,
      smallLeft: 0,
      bigTop: 0,
      bigLeft: 0,
    };
  },
  directives: {
    NavActive,
  },
  computed: {
    ...mapState("products", ["products"]),
    showProd() {
      let obj = {};
      this.products.forEach((ele) => {
        if (ele.id == this.id && ele.classify_id != 358) {
          obj = ele;
        }
      });
      return obj;
    },
    titles() {
      return this.showProd.desc.split("-");
    },
    relatedProd() {
      return this.products.filter((ele) => {
        return (
          ele.price < 1000 &&
          ele.desc.includes(this.showProd.name.split(" ")[0])
        );
      });
    },
    // 面包屑 标题
    series() {
      let msg = this.showProd.name.match(/\w?/);
      if (msg) {
        msg = this.showProd.name.split(" ")[0] + "系列";
      } else {
        msg = "配件";
      }
      return msg;
    },
    totalPrice() {
      return this.relateChecked.reduce(
        (total, ele) => total + ele.sale_price,
        this.showProd.sale_price
      );
    },
  },
  methods: {
    ...mapActions("cart", ["addtocart"]),
    decrement() {
      if (this.num > 1) {
        this.num--;
      }
    },
    increment() {
      this.num++;
    },
    // 添加购物车
    addProduct(item) {
      if (sessionStorage.getItem("token")) {
        this.addtocart(item);
        this.$message({
          type: "success",
          message: "添加成功!",
        });
      } else {
        this.$router.push("/login");
      }
    },
    addAll() {
      if (sessionStorage.getItem("token")) {
        this.relateChecked.forEach((ele) => {
          this.addtocart(ele);
        });
        this.addtocart(this.showProd);
        this.$message({
          type: "success",
          message: "添加成功!",
        });
      } else {
        this.$router.push("/login");
      }
    },
    //立即购买
    buyNow(prod) {
      if (sessionStorage.getItem("token")) {
        sessionStorage.setItem("checkout", JSON.stringify(prod));
        this.$router.push({ name: "OrderCheck" });
      } else {
        this.$router.push("/login");
      }
    },
    //滚动事件
    handleScroll() {
      this.top = this.$refs.cls.offsetTop;
      let top = document.documentElement.scrollTop;
      if (top >= this.top + 60) {
        this.up = true;
        this.theWidth = document.body.clientWidth + "px";
      } else {
        this.up = false;
        this.theWidth = "970px";
      }
    },
    //点击切换
    handleChange(index) {
      this.currentIndex = index;
      this.up = true;
      window.scrollTo(0, this.$refs.cls.offsetTop + 100);
    },
    //放大镜
    handleMove(e) {
      this.offsetTop =
        this.$refs.glass.offsetTop + this.$refs.glass.offsetParent.offsetTop;
      this.offsetLeft =
        this.$refs.glass.offsetLeft + this.$refs.glass.offsetParent.offsetLeft;
      this.smallWidth = this.$refs.small.offsetWidth;
      this.smallHeight = this.$refs.small.offsetHeight;
      this.bigWidth = this.$refs.big.offsetWidth;
      this.bigHeight = this.$refs.big.offsetHeight;
      if (e.pageX - this.offsetLeft <= this.smallWidth / 2) {
        this.smallLeft = 0;
      } else if (
        this.$refs.glass.offsetWidth + this.offsetLeft - e.pageX <=
        this.smallWidth / 2
      ) {
        this.smallLeft = this.$refs.glass.offsetWidth - this.smallWidth;
      } else {
        this.smallLeft = e.pageX - this.offsetLeft - this.smallWidth / 2;
      }
      if (e.pageY - this.offsetTop <= this.smallHeight / 2) {
        this.smallTop = 0;
      } else if (
        this.$refs.glass.offsetHeight + this.offsetTop - e.pageY <=
        this.smallHeight / 2
      ) {
        this.smallTop = this.$refs.glass.offsetHeight - this.smallHeight;
      } else {
        this.smallTop = e.pageY - this.offsetTop - this.smallHeight / 2;
      }
      this.bigTop =
        (-this.smallTop * this.$refs.big.offsetHeight) / this.smallHeight;
      this.bigLeft =
        (-this.smallLeft * this.$refs.big.offsetWidth) / this.smallWidth;
    },
    show() {
      this.showGlass = true;
    },
    unshow() {
      this.showGlass = false;
    },
  },
  watch: {
    $route: {
      handler(newValue, oldValue) {
        this.id = this.$route.params.id;
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    this.id = this.$route.params.id;
  },
  //监听滚动事件
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  beforeRouteUpdate(to, from, next) {
    this.currentIndex1 = 0;
    next();
  },
};
</script>

<style lang="scss">
section {
  background-color: #fff;
  margin-bottom: 0 !important;
  .container {
    width: 1140px;
    h2 {
      padding: 5px 10px 10px 0;
      margin: 0;
      font-size: 14px;
      line-height: 1.5;
      text-align: left;

      a {
        color: #333;
        text-decoration: none !important;

        &:hover {
          color: #ee0a3b;
        }
      }
    }

    //  商品详情
    .goods_info {
      overflow: hidden;

      .carousel {
        .goods_perview {
          width: 435px;
          height: 435px;
          position: relative;
          a {
            display: block;
            width: 100%;
            height: 100%;

            img {
              width: 100%;
              height: 100%;
            }
          }
          .zoomPup {
            left: 0;
            top: 0;
            width: 174px;
            height: 174px;
            position: absolute;
            border-width: 1px;
            background-color: #fff;
            border: 1px solid #ccc;
            opacity: 0.6;
            cursor: crosshair;
            z-index: 100;
          }

          .zoomWindow {
            position: absolute;
            left: 450px;
            top: 0px;
            z-index: 100;
            width: 500px;
            height: 420px;
            overflow: hidden;
            background-color: #fff;

            img {
              position: absolute;
              width: 250%;
              height: 250%;
            }
          }
        }

        ul.owl-carousel {
          width: 433px;
          padding-left: 23px;
          height: 62px;

          li {
            float: left;
            margin-right: 20px;
            width: 62px;
            height: 62px;
            border: 1px solid #ccc;

            img {
              width: 60px;
              height: 60px;
            }
          }

          li.zrc {
            border: 1px solid #ee0a3b;
          }
        }
      }

      .f-action {
        margin-top: 30px;

        .J-share {
          float: left;
          margin-left: 20px;
          height: 20px;
          line-height: 20px;
          display: flex;
          align-items: center;

          span {
            display: inline-block;
            font-size: 14px;
            height: 20px;
            line-height: 20px;
            cursor: pointer;

            &:hover {
              color: #ee0a3b;
            }
          }

          a {
            display: inline-block;
            width: 17px;
            height: 16px;
            margin: 2px 2px 0;

            &:nth-of-type(1) {
              background: url(../assets/image/product/jinlingtu.png) no-repeat;
              background-position: 0 -104px;
            }

            &:nth-of-type(2) {
              background: url(../assets/image/product/jinlingtu.png) no-repeat;
              background-position: 0 -2652px;
            }

            &:nth-of-type(3) {
              background: url(../assets/image/product/jinlingtu.png) no-repeat;
              background-position: 0 -1612px;
            }

            &:nth-of-type(4) {
              background: url(../assets/image/product/jinlingtu.png) no-repeat;
              background-position: 0 -728px;
            }

            &:nth-of-type(5) {
              background: url(../assets/image/product/jinlingtu.png) no-repeat;
              background-position: 0 -468px;
            }
          }
        }

        .j_fav {
          float: left;
          margin-left: 20px;
          cursor: pointer;

          &:hover {
            color: #ee0a3b;
          }
        }
      }

      .right {
        float: right;
        width: 690px;

        h1 {
          margin: 15px 0 0;
          font-size: 20px;
          color: #172b40;
          line-height: 1.8;
          text-align: left;
          font-weight: 400;
        }

        .sell_points {
          margin: 5px 0;
          text-align: left;

          span {
            color: #e53333;
          }
        }

        .promotion {
          position: relative;
          padding: 10px 10px 10px 0;
          margin: 5px 0;
          background-color: #f7f7f7;
          border-bottom: 1px dotted #ddd;

          .final_price {
            display: flex;
            padding: 10px 0;

            .lab {
              width: 90px;
              padding-left: 5px;
              margin-right: 15px;
              text-align: right;
              color: #636363;
            }

            .val {
              del {
                color: #636363;
              }

              p {
                margin: 10px 0 0;
                font-size: 24px;
                line-height: 20px;
                font-weight: 700;
                color: #ee0a3b;
              }
            }
          }

          .openChatBox {
            position: absolute;
            top: 15px;
            right: 20px;
            padding: 3px 15px;
            background-color: #233846;
            display: block;
            color: #fff;
            z-index: 99;

            &::after {
              content: "";
              display: block;
              width: 16px;
              height: 16px;
              background: url(../assets/image/product/ldots.png) no-repeat;
              position: absolute;
              top: -8px;
              right: 5px;
            }
          }
        }

        .f_info {
          .f-field {
            padding: 10px 0;
            border-top: 1px dotted #ddd;
            border-bottom: 1px dotted #ddd;
            display: flex;

            .lab {
              width: 90px;
              padding-left: 5px;
              margin-right: 15px;
              line-height: 30px;
              text-align: right;
              color: #636363;
            }

            .val {
              display: flex;
              line-height: 30px;

              .spec_item {
                width: 62px;
                height: 62px;
                border: 1px solid #f3f3f3;
                margin-right: 15px;

                img {
                  display: inline-block;
                  width: 100%;
                  height: 100%;
                }
              }

              .spec_item.z-crt {
                position: relative;
                border: 1px solid #ee0a3b;

                &::after {
                  position: absolute;
                  right: 0;
                  bottom: 0;
                  z-index: 3;
                  width: 15px;
                  height: 15px;
                  background: url(../assets/image/product/sanjiao.png) bottom
                    right no-repeat;
                  content: "";
                }
              }
            }
          }
        }

        .f-field {
          display: flex;
          padding: 10px 0;

          .lab {
            width: 90px;
            padding-left: 5px;
            margin-right: 15px;
            line-height: 30px;
            text-align: right;
            color: #636363;
          }

          .val {
            display: flex;
            line-height: 30px;

            span {
              display: flex;
              align-items: center;
              margin-right: 15px;
              color: #636363;

              &:first-of-type {
                .iconfont {
                  font-size: 14px !important;
                }
              }

              .iconfont {
                font-size: 18px !important;
                margin-right: 2px;
              }
            }

            // 购买数量
            .amountAct {
              display: flex;
              border: 1px solid #e0e0e0;

              .minus {
                width: 30px;
                height: 30px;
                line-height: 30px;
                font-size: 20px;
                text-align: center;
                border-right: 1px solid #e0e0e0;
                cursor: pointer;
              }

              input {
                width: 30px;
                height: 30px;
                line-height: 30px;
                font-size: 16px;
                text-align: center;
                outline: 0;
                border-width: 0;
              }

              .plus {
                width: 30px;
                height: 30px;
                line-height: 30px;
                font-size: 20px;
                text-align: center;
                border-left: 1px solid #e0e0e0;
                cursor: pointer;
              }
            }
          }
        }

        //   购买按钮
        .buy_btn {
          margin-top: 20px;
          text-align: left;

          .joincart {
            display: inline-block;
            padding: 12px 0;
            width: 180px;
            font-weight: 400;
            background-color: #fff;
            color: #ee0a3b;
            border: 1px solid #ee0a3b;
            font-size: 14px;
            text-align: center;
            cursor: pointer;
          }

          .buynow {
            display: inline-block;
            padding: 12px 0;
            width: 180px;
            font-weight: 400;
            background-color: #ee0a3b;
            font-size: 14px;
            text-align: center;
            border: 1px solid #ee0a3b;
            margin-left: 10px;
            color: #fff;
            cursor: pointer;
          }
        }
      }
    }

    // 关联商品推荐
    .recom {
      margin-top: 26px;
      h1 {
        border-bottom: 1px solid #e7e7e7;
        line-height: 32px;
        font-weight: 400;
        font-size: inherit;
      }

      .recom_content {
        margin: 24px 0;
        overflow: hidden;

        .fl {
          display: flex;
          flex-direction: column;

          img {
            width: 90px;
            height: 90px;
          }

          .goods_title {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 80px;
            margin: 1em 0;
          }

          .icon {
            line-height: 70px;
            font-weight: 700;
            font-size: 40px;
            color: #ccc;
            margin: 0.5em 1em;
            display: block;
          }
        }

        .fr {
          .icon {
            line-height: 70px;
            font-weight: 700;
            font-size: 40px;
            color: #ccc;
            margin: 0.5em 1em;
            display: block;
          }
        }

        .fr.recom-2 {
          line-height: 2.5;

          .recom-price {
            color: #ee0a3b;
          }

          .recom_joincart {
            button {
              display: inline-block;
              padding: 0 20px;
              background-color: #ee0a3b;
              font-size: 14px;
              text-align: center;
              border: 1px solid #ee0a3b;
              outline: 0;
              line-height: 2.5;
              color: #fff;
            }
          }
        }

        .recom-1 {
          position: relative;
          overflow: hidden;

          .arrow {
            position: absolute;
            top: 50%;
            margin-top: -35px;
            width: 20px;
            line-height: 70px;
            border: 1px solid;
            cursor: pointer;
            color: #ccc;
            text-align: center;
          }

          .left_arrow {
            left: 0;
          }

          .right_arrow {
            right: 0;
          }

          .recom-con {
            margin: 0 3em;
            overflow: hidden;

            .recom-wrap {
              width: 200%;

              .recom-item {
                width: 101px;
                float: left;
                margin: 0 1%;
                overflow: hidden;

                img {
                  width: 70px;
                  height: 70px;
                  display: block;
                }

                a {
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  text-decoration: none;
                  color: #333;

                  &:hover {
                    color: #ee0a3b;
                  }
                }

                .recom-price {
                  color: #ee0a3b;
                }
              }
            }
          }
        }
      }
    }

    .g-mn.cls {
      margin-top: 30px;
      padding-bottom: 20px;
      overflow: hidden;

      .goods-more-info {
        width: 970px;
        .sticky-wrap {
          height: 33px;
          background-color: #fff;

          .m-hd {
            border-bottom: 1px solid #ddd;
            height: 100%;
            line-height: 1.5;
            overflow: hidden;

            ul {
              height: 100%;
              display: inline-block;

              li {
                float: left;
                color: #999;
                font-size: 14px;
                cursor: pointer;
                height: 100%;
                text-align: center;
                padding: 0 30px;
              }

              li.z-crt {
                border-bottom: 2px solid #263746;
                color: #263746;
                margin-bottom: -1px;
                position: relative;
              }
            }
            .action {
              line-height: 60px;
              span {
                margin-right: 10px;
                color: #ee0a3b;
                font-weight: 700;
              }
              button {
                padding: 5px 25px;
                background-color: #ee0a3b;
                font-size: 14px;
                text-align: center;
                border: 1px solid #ee0a3b;
                outline: 0;
                color: #fff;
                cursor: pointer;
              }
            }
          }
        }
        .sticky-wrap.toTop {
          position: fixed;
          top: 0;
          left: 0;
          height: 60px;
          z-index: 99;
          li {
            line-height: 60px;
          }
        }
        .goods-description {
          padding-top: 10px;

          .product-attributes {
            padding: 10px 15px;

            .cls {
              height: 26px;
              margin-bottom: 0;

              ul {
                li {
                  float: left;
                  width: 33.3%;
                  line-height: 26px;
                  color: #999;
                  text-align: left;
                }
              }
              ul.toTop {
                line-height: 60px;
              }
            }
          }

          .invoice-note {
            .note-title {
              font-size: 20px;
              background-color: #efefef;
              padding: 5px 10px;
            }

            .note-content {
              font-size: 15px;
              line-height: 26px;
              padding: 5px 10px;

              p {
                margin: 0;
              }
            }
          }
        }

        // 商品详细参数
        .goods-parameters {
          padding-top: 10px;
          // display: none;

          table {
            border-collapse: collapse;
            border-spacing: 0;
            font-size: 12px;
            width: 100%;

            tr {
              .section-hd {
                background-color: #efefef;
                text-align: left;
                border: 1px solid #ddd;
                height: 36px;
                padding-left: 8px;
                font-size: 14px;
              }

              td {
                border: 1px solid #ddd;
                line-height: 2;
                padding: 4px 10px;

                &:first-of-type {
                  font-weight: 700;
                  text-align: right;
                  width: 16%;
                  white-space: nowrap;
                }
              }
            }
          }
        }
      }

      .pro_lsidebar.fr {
        width: 160px;
        border: 1px solid #d4d4d4;

        .gray-title {
          height: 97px;
          width: 158px;
          line-height: 92px;
          background: url(../assets/image/product/rankbg_03.png) center
            no-repeat #f3f3f3;
          border-top: 1px solid #fff;
          border-bottom: 1px solid #fff;
          font-size: 18px;
          font-weight: 700;
          text-indent: -999999px;
        }

        .gray-content {
          .product-list {
            margin-bottom: 0;

            li {
              img {
                width: 150px;
                height: 150px;
              }

              .product-info {
                padding: 5px 8px;
                text-align: center;

                .product-name {
                  line-height: 1.2em;
                  margin-bottom: 2px;
                  height: 14px;
                  overflow: hidden;

                  a {
                    color: #9a9a9a;
                  }
                }

                .product-price {
                  color: #fe0000;
                  font-size: 16px;
                  margin-top: 5px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>